<!DOCTYPE html>
<html>

<head>
    <title>
        NESHouse.com
    </title>
    <meta charset="UTF-8">

    <link href="https://fonts.loli.net/css?family=Press+Start+2P" rel="stylesheet">
    <link href="css/bulma.min.css" rel="stylesheet" type="text/css" />
    <link href="css/nes.min.css" rel="stylesheet" type="text/css" />

    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="js/truncate.min.js"></script>
    <script src="js/alpine.min.js"></script>

    <script src="js/av-live-query-min.js"></script>
    <script src="js/AgoraRTC_N-4.3.0.js"></script>
    <script src="js/app.js"></script>
</head>

</html>

<body x-cloak x-data="index()" x-init="init()">
    <div class="columns is-centered">
        <div class="column is-half">

            <!-- header -->
            <div class="header">
                <h1 class="title">
                    NESHouse.com
                </h1>
                <h2 x-html="subtitle">
                </h2>
            </div>
            <!-- header end -->

            <!-- loginProgress -->
            <progress class="nes-progress is-pattern" x-show="showProgress" x-bind:value="progress"
                max="100"></progress>
            <!-- loginProgress end -->

            <!-- register -->
            <div class="container" x-show="isShowRegsiter">
                <h3 class="title">
                    Join NESHouse Room
                </h3>
                <div class="register-form">
                    <div class="nes-field">
                        <label for="name_field">
                            Please input your nickname
                        </label>
                        <input class="nes-input" id="name_field" x-model="nickname" type="text">
                        </input>
                    </div>
                    <button class="nes-btn is-primary mt-2" type="button" @click="loginWithInviteAndUsername()">
                        Join Room
                    </button>
                </div>
            </div>
            <!-- register end -->

            <!-- chatroom -->
            <div class="nes-container with-title is-centered" x-show="!isShowChatRoom && isShowButton">
                <p class="title">User agreement</p>
                <p>Allow us to play with your playback device</p>
                <button type="button" class="nes-btn is-success" @click="showForm">YES</button>

            </div>
            <div class="container" id="host" x-show="isShowChatRoom">
                <h3 class="title">
                    Host
                </h3>
                <div class="columns is-desktop is-multiline">
                    <template x-for="item in hosts" :key="item">
                        <div class="column is-one-quarter is-desktop">
                            <div class="user">
                                <div class="nes-avatar  is-rounded is-large"
                                    style="background-color: #ffc75f;text-align: center;overflow: hidden;line-height: 64px;font-size: 20px;"
                                    x-text="$truncate(item.nickname,2,'')" :title="item.nickname"></div>
                                <span>
                                    <span class="username" x-bind:class="{ 'nes-text is-primary': item.status }"
                                        x-text="$truncate(item.nickname,5)"></span>
                                </span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="container" id="user" x-show="isShowChatRoom">
                <h3 class="title">Audience</h3>
                <div class="avatar">
                    <div class="columns is-desktop is-multiline">
                        <template x-for="item in guests" :key="item">
                            <div class="column is-one-quarter is-desktop">
                                <div class="user">
                                    <div class="nes-avatar  is-rounded is-large"
                                        style="background-color: #5eaaa8;text-align: center;overflow: hidden;line-height: 64px;font-size: 20px;"
                                        x-text="$truncate(item.nickname,2,'')"></div>
                                    <span class="username" x-text="$truncate(item.nickname,5)">

                                    </span>
                                </div>
                            </div>
                        </template>

                    </div>
                </div>
            </div>
            <div class="container" id="control" x-show="isShowChatRoom">
                <h3 class="title">
                    Control
                </h3>
                <div class="avatar">
                    <div class="columns is-desktop">
                        <div class="column" x-show="isAdmin">
                            <button class="nes-btn is-error" @click="deInit" type="button">
                                Close Room
                            </button>
                        </div>
                        <div class="column" x-show="!isAdmin">
                            <button class="nes-btn is-error" @click="deInit" type="button">
                                Leave Room Quietly
                            </button>
                        </div>
                        <div class="column" x-show="isAdmin || isHost">
                            <button class="nes-btn" x-text="rtcEnable?'Mute':'Unmute'" type="button"
                                @click="muteMySelf">
                                Mute
                            </button>
                        </div>
                        <div class="column" x-show="!isAdmin && !isHost && !hasApplication">
                            <button class="nes-btn" type="button" @click="makeApplication">
                                Hands Up
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- charroom end -->

            <!-- share -->
            <div class="container" id="share" x-show="isShowChatRoom && isShowShare">
                <h3 class="title">
                    Share
                </h3>
                <div class="avatar">
                    <textarea id="textarea_field" x-show="shareText" x-model="shareText" style="min-height: 7em;"
                        class="nes-textarea"></textarea>
                    <div class="columns is-desktop">

                        <div class="column is-two-fifths">
                            <button class="nes-btn is-primary" type="button" @click="copyLink">
                                Copy Share Link
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- share end -->

            <!-- controlpanel -->
            <div class="container" id="host-list" x-show="isShowChatRoom && isAdmin">
                <h3 class="title">
                    Host List
                </h3>
                <div class="lists">
                    <ul class="nes-list is-circle">
                        <template x-for="item in hosts" :key="item">
                            <li x-show="userId!=item.userId"><span x-text="item.nickname"></span> <button type="button"
                                    @click="muteHost(item)" class="nes-btn is-warning" style="margin-right: 20px;"
                                    x-text="item.forceMute?'Unmute':'Mute'"></button>
                            </li>
                        </template>
                    </ul>
                </div>

            </div>
            <div class="container" id="application-list" x-show="isShowChatRoom && isAdmin">
                <h3 class="title">
                    Application List
                </h3>
                <div class="lists">
                    <ul class="nes-list is-circle">
                        <template x-for="item in applications" :key="item">
                            <li><span x-text="item.nickname"></span> <button type="button"
                                    @click="makePeopleBeHost(item)" class="nes-btn is-success"
                                    style="margin-right: 20px;">Allow</button>
                            </li>
                        </template>
                    </ul>
                </div>

            </div>
            <!-- controlpanel end -->

            <div style="margin-top: 10px;">
                Design By <a href="mailto:bestony@linux.com">Bestony</a>, Sponsored by <a
                    href="https://leancloud.app/">LeanCloud</a>,<a
                    href="https://www.agora.io/cn/?utm_source=opensource&utm_medium=refferal&utm_campaign=clubhouseB">Agora</a>
            </div>
        </div>
    </div>

</body>